<template>
  <div class="leftbox">
    <div class="nenghao">
      <div class="title">能耗情况</div>
      <div class="nnegback">
        <div class="xiangqing">
          <div class="alit">
            <div>今日 {{ getdanwei(entityvalue.epowerCurDay) }}</div>
            <div class="blue">{{ getfloor(entityvalue.epowerCurDay) }}</div>
          </div>
          <div class="alit">
            <div>昨日 {{ getdanwei(entityvalue.epowerPreDay) }}</div>
            <div class="orange">{{ getfloor(entityvalue.epowerPreDay) }}</div>
          </div>
        </div>
        <div class="xiangqing">
          <div class="alit">
            <div >本月电量 {{ getdanwei(entityvalue.epowerCurMonth) }}</div>
            <div class="blue">{{ getfloor(entityvalue.epowerCurMonth) }}</div>
          </div>
          <div class="alit">
            <div>上月同期 {{ getdanwei(entityvalue.epowerPreMonth) }}</div>
            <div class="orange">{{ getfloor(entityvalue.epowerPreMonth) }}</div>
          </div>
        </div>
        <div class="xiangqing">
          <div class="alit">
            <div >本年累计 {{ getdanwei(entityvalue.epowerCurYear) }}</div>
            <div class="blue">{{ getfloor(entityvalue.epowerCurYear) }}</div>
          </div>
          <div class="alit">
            <div>去年同期 {{ getdanwei(entityvalue.epowerPreYear) }}</div>
            <div class="orange">{{ getfloor(entityvalue.epowerPreYear) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="nenghao">
      <div class="title ismargin">碳排放</div>
      <div class="nnegback">
        <div class="xiangqing">
          <div class="alit">
            <div>本年累计 (吨)</div>
            <div class="blue">{{entityvalue.carbonEmissionCurYear?(+entityvalue.carbonEmissionCurYear).toFixed(1):''}}</div>
          </div>
          <div class="alit">
            <div>去年同期 (吨)</div>
            <div class="orange">{{ entityvalue.carbonEmissionPreYear?(+entityvalue.carbonEmissionPreYear).toFixed(1):'' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="nenghao">
      <div class="title ismargin">月光伏消纳</div>
      <div class="guangfu">
        <div class="xiaona xiaonalv">
          <div class="text">光伏电量</div>
          <div class="number">{{ entityvalue.photovoltaicPower }} <span class="text">kWh</span></div>
          <div class="text">上网电量</div>
          <div class="number">{{ entityvalue.internetPower }} <span class="text">kWh</span></div>
        </div>
        <div class="xiaona echart" ref="xiaonaref"></div>
      </div>
    </div>
    <div class="nenghao">
      <div class="title ismargin">监测设备</div>
      <div class="guangfu">
        <div class="xiaona xiaonalv">
          <div class="text">在线</div>
          <div class="zaixian">{{ entityvalue.termOnline+entityvalue.meterOnline}} <span class="text">个</span></div>
        </div>
        <div class="xiaona echart" ref="zaixianrefs"></div>
      </div>
    </div>
  </div>
</template>
<script>

import {getmonthxiaonaapi,getzhongduanapi,getyongdianapi} from '@/api/ElectricalDistribution/SX-hrss'
import {getDeviceEch} from './preEchart.js'
export default {
  name: 'CallPoliceLeftbox',

  data() {
    return {
      entityvalue:{}
    }
  },

  async mounted() {
    const { data: { entity } } = await getmonthxiaonaapi({ subburo: '88000341' })
    const { data: { entity: onlinevalue } } = await getzhongduanapi({ subburo: '88000341' })
    const {data:{entity:elvalue}}=await getyongdianapi({ subburo: '88000341' })
    this.entityvalue = {
      ...entity,...onlinevalue,...elvalue
    }
    getDeviceEch(this,this.$refs.xiaonaref,entity.consumptionRate,'消纳率','#13ccad')
    getDeviceEch(this,this.$refs.zaixianrefs,onlinevalue.allOnlineRate,'在线率','#4fa5ff')
  },

  methods: {
    getfloor(num) {
      let result;
      if (num >= 10000) {
          result = num / 10000;
      } else {
          result = num;
      }
      return Math.floor(result * 100) / 100;
    },
    getdanwei(num) {
      return num>=10000?'(万kWh)':'(kWh)'
    }
  }
}
</script>
<style lang="scss" scoped>
.leftbox{
  width: 445px;
  height: 100%;
  .nenghao{
    .nnegback{
      .xiangqing{
        height: 96px;
        margin: 5px 20px;
        background-image: url('@/assets/ElectricalDistribution/SX-hrss/back.png');
        display: flex;
        .alit{
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: #fff;
          .blue{
            font-size: 24px;
            color: #55cee3;
          }
          .orange{
            font-size: 24px;
            color: #c58340;
          }
        }
      }
    }
    .guangfu{
      display: flex;
      height: 155px;
      .xiaona{
        width: 40%;
      }
      .echart{
        width: 60%;
      }
      .xiaonalv{
        display: flex;
        padding-left: 20px;
        flex-direction: column;
        justify-content: space-evenly;
        color: #fff;
        .text{
          font-size: 14px;
        }
        .number{
          font-size: 23px;
          color: #61d7ab;
        }
        .zaixian{
          font-size: 23px;
          color: #4fa5ff;
        }
      }
    }
    .ismargin{
      margin-top: 10px;
    }
  }
}
.title {
  height: 40px;
  color: #fff;
  line-height: 40px;
  background: linear-gradient(to right, #0b528a, #070e27) center center no-repeat;
  padding-left: 10px;
  margin-bottom: 10px;
}
::v-deep ::-webkit-scrollbar {
    display: none;
}
</style>
